<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产过程查询</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <span>
        <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable>
        </el-input>
        <el-button type="primary" @click="select">主要按钮</el-button>
    </span>

    <el-table
            :data="orders"
            style="width: 100%"
    >
        <el-table-column
                label="序号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.tProduct.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品颜色"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">黑</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产数量"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="下单时间"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="负责人"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.operator }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productStatus }}</span>
            </template>
        </el-table-column>
<!--        <el-table-column label="操作">-->
<!--            <template slot-scope="scope">-->
<!--&lt;!&ndash;                <el-button&ndash;&gt;-->
<!--&lt;!&ndash;                        size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button size="mini" type="warning" icon="el-icon-s-operation" @click="open(scope.$index, scope.row)"></el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button&ndash;&gt;-->
<!--&lt;!&ndash;                        size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;                        type="danger"&ndash;&gt;-->
<!--&lt;!&ndash;                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>&ndash;&gt;-->
<!--            </template>-->
<!--        </el-table-column>-->
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 25, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                input:"",
                orders:[],
                total:0,
                current:0,
                pageSize:5
            }
        },
        methods:{
            select(current){
                axios.get("/TProductOrder?id="+this.input+"&&current="+this.current+"&&rows="+this.pageSize).then(res=>{
                    console.log(res.data);
                    this.orders = res.data.records;
                    this.total = res.data.total;
                    this.pageSize = res.data.size;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.select(this.current)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current=val;
                this.select(this.current)
            },
        }
    })
</script>
</html>